<template>
  <div>
    <el-page-header @back="goBack" content="新增盘点记录" style="color:#3198ff"></el-page-header>
    <div
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      class="box"
    >
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="form-item">
            <span class="title">商品一级分类</span>
            <el-select v-model="param.cid1" placeholder="请选择" @change="fristGoodClick">
              <el-option
                v-for="item in productOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="form-item">
            <span class="title">商品二级分类</span>
            <el-select v-model="param.cid2" placeholder="请选择">
              <el-option
                v-for="item in productOptions1"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="form-item">
            <span class="title">商品名称</span>
            <el-input placeholder="请输入名称" v-model="param.title"></el-input>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="form-item button-container">
            <el-button type="primary" @click="search" icon="el-icon-search">查询</el-button>
            <el-button type="primary" @click="resetSearchCotnet" icon="el-icon-refresh">重置</el-button>
          </div>
        </el-col>
      </el-row>
      <div style="margin-top: 50px;">
        <el-table
          ref="multipleTable"
          border
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          height="450px"
          @selection-change="handleSelectionChange"
        >
          <el-table-column prop="title" label="商品名称"></el-table-column>
          <el-table-column prop="stock" label="库存量"></el-table-column>
          <el-table-column label="实际盘点数量">
            <template slot-scope="scope">
              <el-input-number
                size="small"
                type="number"
                :min="0"
                v-model="scope.row.checkNum"
                placeholder="请输入数量"
                controls-position="right"
              ></el-input-number>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="ooNum" label="实际增减数量"></el-table-column> -->
        </el-table>
      </div>
      <el-row :gutter="20">
        <el-col :span="10">
          <div class="form-item">
            <span class="title">
              <span style="color:#F56C6C">*</span>备注：
            </span>
            <el-input type="textarea" :rows="5" placeholder v-model="Mark"></el-input>
          </div>
        </el-col>
      </el-row>
      <div style="text-align:center; margin-top: 50px;">
        <el-button type="primary" @click="submitForm()">保存</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "",
  data() {
    return {
      productOptions: [], //商品一级类型
      productOptions1: [], //商品二级类型
      tableData: [],
      Mark: "",
      param: {
        title: "",
        cid1: "",
        cid2: ""
      },
      loading:true
    };
  },
  components: {},
  computed: {},
  beforeMount() {},
  mounted() {
    this.initData();
    this.goodFirst();
  },
  methods: {
    fristGoodClick(val) {
      this.cid2 = "";
      this.goodSecond(val);
    },
    goodFirst() {
      this.$service.firstGood().then(res => {
        if (res.code == "00000") {
          this.productOptions = res.data || [];
        }
      });
    },
    goodSecond(cid) {
      this.$service.secondGood(cid).then(res => {
        if (res.code == "00000") {
          this.productOptions1 = res.data || [];
        }
      });
    },
    search() {
      this.initData();
    },
    resetSearchCotnet() {
      this.param.title = "";
      this.param.cid1 = "";
      this.param.cid2 = "";
    },
    initData() {
      this.loading =true;
      this.$service.selectSkuNum(this.param).then(res => {
        if (res.code == "00000") {
          this.tableData = res.data;
          this.loading =false;
        }
      });
    },
    goBack() {
      this.$router.back();
    },
    handleSelectionChange(val) {},
    submitForm() {
      for (let i = 0; i < this.tableData.length; i++) {
        var item = this.tableData[i];
        if (item.stock > item.checkNum) {
          this.tableData[i].calculateNum = item.stock - item.checkNum;
        } else if (item.stock < item.checkNum) {
          this.tableData[i].calculateNum = item.checkNum - item.stock;
        }
      }
      var param = {
        userId: this.Global.user.userId,
        remark: this.Mark,
        checkList: this.tableData
      };
      if (this.Mark == "") {
        this.$message({
          message: "请填写备注",
          type: "warning"
        });
        return;
      }
      this.$service.inventorycheckInsertIC(param).then(res => {
        if (res.code == "00000") {
          this.$message({
            message: "添加成功",
            type: "success"
          });
          this.$router.back();
        } else {
          this.$message({
            message: res.message,
            type: "warning"
          });
        }
      });
    }
  },
  watch: {}
};
</script>
<style scoped>
</style>